ngFor
.ts 檔裡定義 skills 與 projects 陣列ngFor 在 .html 裡自動產生清單在純 HTML 裡,你要顯示一段文字,就只能直接寫死:
<p>哈囉,我是 Chiayu</p>
但在 Angular 裡,我們可以這樣做:
<p>{{ name }}</p>
然後在 .ts 檔裡宣告:
name = 'Chiayu';
👉 Angular 會自動把 name 的值顯示在畫面上。
這種 {{ }} 的語法就叫 插值 (Interpolation)。
如果我們有一個清單:
skills = ['HTML', 'CSS', 'TypeScript'];
在 .html 裡,我們可以用 *ngFor 迴圈:
<ul>
  <li *ngFor="let skill of skills">{{ skill }}</li>
</ul>
👉 Angular 會自動幫我們把陣列每一項都渲染成 <li>。
skills.component.tsimport { Component } from '@angular/core';
@Component({
  selector: 'app-skills',
  templateUrl: './skills.component.html',
  styleUrls: ['./skills.component.scss']
})
export class SkillsComponent {
  skills = [
    { name: 'HTML / CSS / SCSS', category: 'frontend' },
    { name: 'TypeScript', category: 'frontend' },
    { name: 'Angular / React / Vue', category: 'frontend' },
    { name: 'Node.js / Express', category: 'backend' },
    { name: 'Git / GitHub / Docker', category: 'tools' },
    { name: 'Vite / Webpack', category: 'tools' }
  ];
}
skills.component.html<section id="skills" class="container section">
  <h2>技能 Skillset</h2>
  <ul class="skill-grid">
    <li *ngFor="let skill of skills">
      {{ skill.name }}
    </li>
  </ul>
</section>
👉 現在如果要新增技能,只要在 .ts 裡加一筆資料,畫面會自動更新。
projects.component.tsimport { Component } from '@angular/core';
@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.scss']
})
export class ProjectsComponent {
  projects = [
    {
      title: '毛毛購物(寵物電商)',
      desc: '主導前端架構,完成商品列表、購物流程與訂單頁。',
      tech: 'Angular + Node.js|購物車、結帳、RWD',
      link: '#'
    },
    {
      title: 'LINE Bot 預約系統',
      desc: '整合 LINE 聊天介面與雲端排程,完成會員預約流程。',
      tech: 'Cloud Functions + LINE API|時段預約',
      link: '#'
    }
  ];
}
projects.component.html<section id="projects" class="container section">
  <h2>作品集 Projects</h2>
  <div class="project-grid">
    <article class="card" *ngFor="let project of projects">
      <h3>{{ project.title }}</h3>
      <p class="muted">{{ project.tech }}</p>
      <p>{{ project.desc }}</p>
      <a class="btn small" [href]="project.link" target="_blank">Live Demo</a>
    </article>
  </div>
</section>
👉 這樣「專案卡片」也不需要死寫 HTML 了。
.ts 的陣列,不用動 HTML.ts 裡加 export class
= 當成比對,而不是 ngFor
<li *ngFor="let skill = skills">
<li *ngFor="let skill of skills">
index.html
component.html 生效[href]
href="{{ project.link }}"
[href]="project.link"
明天,我們要學 Angular 的事件綁定 (Event Binding):